<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/calculate.css">
    <script src="js/calculate.js"></script>
    <title>Calculate</title>
</head>

<body>
    <div class="title">
        <h1 class="title_text">计算界面</h1>
    </div>
    <div class="Intersection_ahead">
        <h1 class="calculate_title">前方交会计算</h1>
        <form action="" class="calculate_input">
            <div class="calculate_input_A" style="position: absolute; top:80px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点A的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="Intersection_ahead_input_A_X" type="text" name="A_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="Intersection_ahead_input_A_Y" type="text" name="A_Y">
                    </div>
                    <div class="calculate_input_data_3">
                        <span>角度:</span>
                        <input id="Intersection_ahead_input_A_angle" type="text" name="A_angle">
                    </div>
                </div>
            </div>
            <div class="calculate_input_B" style="position: absolute; top:150px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点B的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="Intersection_ahead_input_B_X" type="text" name="B_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="Intersection_ahead_input_B_Y" type="text" name="B_Y">
                    </div>
                    <div class="calculate_input_data_3">
                        <span>角度:</span>
                        <input id="Intersection_ahead_input_B_angle" type="text" name="B_angle">
                    </div>
                </div>
            </div>
            <input class="calculate_input_button" type="button" value="计算" onclick="calculate_Intersection_ahead()">
        </form>
        <div class="calculate_output">
            <div class="calculate_output_data">
                <div class="calculate_out_data_text" style="position: absolute; top: 50px;">观测点的坐标：</div>
                <div class="calculate_out_data_X" style="position: absolute; top: 100px;">
                    <span>X:</span>
                    <input id="Intersection_ahead_out_X" type="text" readonly>
                </div>
                <div class="calculate_out_data_Y" style="position: absolute; top: 150px;">
                    <span>Y:</span>
                    <input id="Intersection_ahead_out_Y" type="text" readonly>
                </div>
            </div>
            <div class="calculate_output_draw">
                <canvas id="Intersection_ahead_Canvas" style="width: 100%; height: 100%;"></canvas>
            </div>
        </div>
    </div>
    <div class="Intersection_distance">
        <h1 class="calculate_title">距离交会计算</h1>
        <form action="" class="calculate_input">
            <div class="calculate_input_A" style="position: absolute; top:80px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点A的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="Intersection_distance_input_A_X" type="text" name="A_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="Intersection_distance_input_A_Y" type="text" name="A_Y">
                    </div>
                    <div class="calculate_input_data_3">
                        <span>距离:</span>
                        <input id="Intersection_distance_input_A_distance" type="text" name="A_distance">
                    </div>
                </div>
            </div>
            <div class="calculate_input_B" style="position: absolute; top:150px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点B的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="Intersection_distance_input_B_X" type="text" name="B_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="Intersection_distance_input_B_Y" type="text" name="B_Y">
                    </div>
                    <div class="calculate_input_data_3">
                        <span>距离:</span>
                        <input id="Intersection_distance_input_B_distance" type="text" name="B_distance">
                    </div>
                </div>
            </div>
            <input class="calculate_input_button" type="button" value="计算" onclick="calculate_Intersection_distance()">
        </form>
        <div class="calculate_output">
            <div class="calculate_output_data">
                <div class="calculate_out_data_text" style="position: absolute; top: 50px;">观测点的坐标：</div>
                <div class="calculate_out_data_X" style="position: absolute; top: 100px;">
                    <span>X:</span>
                    <input id="Intersection_distance_out_X" type="text" readonly>
                </div>
                <div class="calculate_out_data_Y" style="position: absolute; top: 150px;">
                    <span>Y:</span>
                    <input id="Intersection_distance_out_Y" type="text" readonly>
                </div>
            </div>
            <div class="calculate_output_draw">
                <canvas id="Intersection_distance_Canvas" style="width: 100%;height: 100%;"></canvas>
            </div>
        </div>
    </div>

    <div class="Distance_and_Angle">
        <h1 class="calculate_title">距离和方位角</h1>
        <form action="" class="calculate_input">
            <div class="calculate_input_A" style="position: absolute; top:80px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点A的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="distance_and_Angle_input_A_X" type="text" name="A_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="distance_and_Angle_input_A_Y" type="text" name="A_Y">
                    </div>

                </div>
            </div>
            <div class="calculate_input_B" style="position: absolute; top:150px">
                <div class="calculate_input_data">
                    <div class="calculate_input_data_text">请输入已知点B的数据：</div>
                    <div class="calculate_input_data_1">
                        <span>X:</span>
                        <input id="distance_and_Angle_input_B_X" type="text" name="B_X">
                    </div>
                    <div class="calculate_input_data_2">
                        <span>Y:</span>
                        <input id="distance_and_Angle_input_B_Y" type="text" name="B_Y">
                    </div>

                </div>
            </div>
            <input class="calculate_input_button" type="button" value="计算" onclick="calculateDistanceAndAngle()">
        </form>
        <div class="calculate_output">
            <div class="calculate_output_data">
                <div class="calculate_out_data_text" style="position: absolute; top: 50px;">距离和方位角：</div>
                <div class="calculate_out_data_X" style="position: absolute; top: 100px;">
                    <span>距离:</span>
                    <input id="distance_and_Angle_out_distance" type="text" readonly>
                </div>
                <div class="calculate_out_data_Y" style="position: absolute; top: 150px;">
                    <span>方位角:</span>
                    <input id="distance_and_Angle_out_angle" type="text" readonly>
                </div>
            </div>
            <div class="calculate_output_draw">
                <canvas id="distance_and_Angle_Canvas" style="width: 100%;height: 100%;"></canvas>
            </div>
        </div>
    </div>

</body>

</html>